<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agentic AI Performance Dataset 2025 - 数据看板</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .header h1 {
            color: #2c3e50;
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            color: #7f8c8d;
            font-size: 1.1em;
        }

        .stats-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #3498db;
            margin-bottom: 10px;
        }

        .stat-label {
            color: #7f8c8d;
            font-size: 1.1em;
        }

        .chart-section {
            margin-bottom: 40px;
        }

        .chart-container {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .chart-title {
            font-size: 1.8em;
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
            border-bottom: 3px solid #3498db;
            padding-bottom: 10px;
        }

        .chart-wrapper {
            position: relative;
            height: 400px;
            margin-bottom: 20px;
        }

        .top-three {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .rank-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .rank-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .rank-card:hover::before {
            animation: shine 0.5s ease-in-out;
        }

        @keyframes shine {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }

        .rank-number {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .rank-name {
            font-size: 1.2em;
            margin-bottom: 10px;
            word-break: break-word;
        }

        .rank-value {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            color: #7f8c8d;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 2em;
            }
            
            .chart-wrapper {
                height: 300px;
            }
            
            .stat-number {
                font-size: 2em;
            }
            
            .chart-title {
                font-size: 1.5em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 Agentic AI Performance Dataset 2025</h1>
            <p>智能体表现数据分析看板</p>
        </div>

        <div class="stats-overview">
            <div class="stat-card">
                <div class="stat-number" id="totalRecords">80</div>
                <div class="stat-label">数据集总记录数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="processedRecords">80</div>
                <div class="stat-label">实际处理记录数</div>
            </div>
        </div>

        <div class="chart-section">
            <div class="chart-container">
                <h2 class="chart-title">📊 问题1：智能体类型多模态支持占比排名</h2>
                <div class="chart-wrapper">
                    <canvas id="agentTypeChart"></canvas>
                </div>
                <div class="top-three" id="agentTypeTop3"></div>
            </div>

            <div class="chart-container">
                <h2 class="chart-title">🏗️ 问题2：大模型架构多模态支持占比排名</h2>
                <div class="chart-wrapper">
                    <canvas id="modelArchChart"></canvas>
                </div>
                <div class="top-three" id="modelArchTop3"></div>
            </div>

            <div class="chart-container">
                <h2 class="chart-title">⚖️ 问题3：任务类别公正性中位数排名</h2>
                <div class="chart-wrapper">
                    <canvas id="taskBiasChart"></canvas>
                </div>
                <div class="top-three" id="taskBiasTop3"></div>
            </div>
        </div>

        <div class="footer">
            <p>数据来源：Agentic AI Performance Dataset 2025 | 生成时间：2025年8月31日</p>
        </div>
    </div>

    <script>
        // 数据
        const dashboardData = {
            "total_records": 80,
            "processed_records": 80,
            "agent_type_multimodal": [
                {"name": "Conversational Agent", "total": 16, "multimodal": 8, "ratio": 50.0},
                {"name": "Task-Specific Agent", "total": 16, "multimodal": 8, "ratio": 50.0},
                {"name": "Reasoning Agent", "total": 16, "multimodal": 8, "ratio": 50.0},
                {"name": "Creative Agent", "total": 16, "multimodal": 7, "ratio": 43.8},
                {"name": "Autonomous Agent", "total": 16, "multimodal": 6, "ratio": 37.5}
            ],
            "model_arch_multimodal": [
                {"name": "Transformer", "total": 16, "multimodal": 8, "ratio": 50.0},
                {"name": "Mixture of Experts", "total": 16, "multimodal": 8, "ratio": 50.0},
                {"name": "Retrieval-Augmented", "total": 16, "multimodal": 8, "ratio": 50.0},
                {"name": "Graph Neural Network", "total": 16, "multimodal": 7, "ratio": 43.8},
                {"name": "Reinforcement Learning", "total": 16, "multimodal": 6, "ratio": 37.5}
            ],
            "task_bias_median": [
                {"name": "Content Generation", "median": 0.851, "count": 16},
                {"name": "Data Analysis", "median": 0.849, "count": 16},
                {"name": "Question Answering", "median": 0.848, "count": 16},
                {"name": "Code Generation", "median": 0.847, "count": 16},
                {"name": "Decision Making", "median": 0.845, "count": 16}
            ]
        };

        // 更新统计数据
        document.getElementById('totalRecords').textContent = dashboardData.total_records;
        document.getElementById('processedRecords').textContent = dashboardData.processed_records;

        // 图表配置
        const chartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        padding: 20,
                        font: {
                            size: 12
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0,0,0,0.1)'
                    }
                },
                x: {
                    grid: {
                        color: 'rgba(0,0,0,0.1)'
                    },
                    ticks: {
                        maxRotation: 45,
                        font: {
                            size: 10
                        }
                    }
                }
            }
        };

        // 创建智能体类型图表
        const agentTypeCtx = document.getElementById('agentTypeChart').getContext('2d');
        new Chart(agentTypeCtx, {
            type: 'bar',
            data: {
                labels: dashboardData.agent_type_multimodal.map(item => item.name),
                datasets: [{
                    label: '多模态支持占比 (%)',
                    data: dashboardData.agent_type_multimodal.map(item => item.ratio),
                    backgroundColor: [
                        'rgba(52, 152, 219, 0.8)',
                        'rgba(46, 204, 113, 0.8)',
                        'rgba(155, 89, 182, 0.8)',
                        'rgba(241, 196, 15, 0.8)',
                        'rgba(231, 76, 60, 0.8)'
                    ],
                    borderColor: [
                        'rgba(52, 152, 219, 1)',
                        'rgba(46, 204, 113, 1)',
                        'rgba(155, 89, 182, 1)',
                        'rgba(241, 196, 15, 1)',
                        'rgba(231, 76, 60, 1)'
                    ],
                    borderWidth: 2
                }]
            },
            options: chartOptions
        });

        // 创建大模型架构图表
        const modelArchCtx = document.getElementById('modelArchChart').getContext('2d');
        new Chart(modelArchCtx, {
            type: 'doughnut',
            data: {
                labels: dashboardData.model_arch_multimodal.map(item => item.name),
                datasets: [{
                    data: dashboardData.model_arch_multimodal.map(item => item.ratio),
                    backgroundColor: [
                        'rgba(52, 152, 219, 0.8)',
                        'rgba(46, 204, 113, 0.8)',
                        'rgba(155, 89, 182, 0.8)',
                        'rgba(241, 196, 15, 0.8)',
                        'rgba(231, 76, 60, 0.8)'
                    ],
                    borderColor: [
                        'rgba(52, 152, 219, 1)',
                        'rgba(46, 204, 113, 1)',
                        'rgba(155, 89, 182, 1)',
                        'rgba(241, 196, 15, 1)',
                        'rgba(231, 76, 60, 1)'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                        labels: {
                            padding: 20,
                            font: {
                                size: 11
                            }
                        }
                    }
                }
            }
        });

        // 创建任务公正性图表
        const taskBiasCtx = document.getElementById('taskBiasChart').getContext('2d');
        new Chart(taskBiasCtx, {
            type: 'line',
            data: {
                labels: dashboardData.task_bias_median.map(item => item.name),
                datasets: [{
                    label: '公正性中位数',
                    data: dashboardData.task_bias_median.map(item => item.median),
                    borderColor: 'rgba(52, 152, 219, 1)',
                    backgroundColor: 'rgba(52, 152, 219, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: 'rgba(52, 152, 219, 1)',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 6
                }]
            },
            options: {
                ...chartOptions,
                scales: {
                    ...chartOptions.scales,
                    y: {
                        ...chartOptions.scales.y,
                        min: 0.84,
                        max: 0.86
                    }
                }
            }
        });

        // 生成前三名卡片
        function createTop3Cards(containerId, data, valueKey, valueLabel) {
            const container = document.getElementById(containerId);
            const top3 = data.slice(0, 3);
            
            container.innerHTML = top3.map((item, index) => `
                <div class="rank-card">
                    <div class="rank-number">#${index + 1}</div>
                    <div class="rank-name">${item.name}</div>
                    <div class="rank-value">${valueLabel}: ${item[valueKey]}${valueKey === 'ratio' ? '%' : ''}</div>
                </div>
            `).join('');
        }

        // 生成所有前三名卡片
        createTop3Cards('agentTypeTop3', dashboardData.agent_type_multimodal, 'ratio', '多模态占比');
        createTop3Cards('modelArchTop3', dashboardData.model_arch_multimodal, 'ratio', '多模态占比');
        createTop3Cards('taskBiasTop3', dashboardData.task_bias_median, 'median', '公正性中位数');
    </script>
</body>
</html>